<!--分类列表 -->

<template>
  <ul class="sort-nav" ref="navlist">
    <li 
      v-for="nav in childrenArr"
       >
      <div class="sort-nav-list">
        <span :style="{marginLeft:label*50+'px'}"></span>
        <span @click="isclos=!isclos"><Icon type="arrow-right-a"></Icon></span>  
        {{nav.title}}||{{nav.id}}
        <input type="hidden" name="id[]" :value="nav.id">
      
      </div>
      
      <template v-if="nav.children.length>0">
        <div v-show="isclos">
          <SortNavList :childrenArr="nav.children" :pid="nav.id" :label="label+1"></SortNavList>
        </div>
      </template>
    </li>
  </ul>
</template>

<script>

export default {
  name: 'SortNavList',
  props:{
    childrenArr:{
      type:Array,
      required: true
    },
    pid:{
      type:[String, Number],
      default:"null"
    },
    label:{
      type:Number,
      default:0
    }
  },
  data () {
    return {
      isclos:true
    }
  },
  mounted () {
    document.body.ondrop = function (event) {
        event.preventDefault();
        event.stopPropagation();
    }
    let todoList=this.$refs.navlist;
    this.$sortable.create(todoList, {
      group: {
        name: this.pid,
        pull: true
      },
      animation: 100,
      ghostClass: 'placeholder-style',
      fallbackClass: 'iview-admin-cloned-item',
    });

  },
  computed:{

  },
  methods:{

  }
}  
</script>
<style scoped>
  .placeholder-style{
    background: #85cfc7;
  }
  .sort-nav{
    list-style-type: none;
  }
  
</style>
